<template>
  <inject-template :item="item" :pageId="pageId" :popId="popId">
    <template v-slot:common>
      <div class="wb-turn-book">
        <div class="flipbook">
          <div v-for="(item, index) in lists" :style="getPageStyle(item)" :key="index"></div>
        </div>
      </div>
    </template>
  </inject-template>
</template>

<script>
import InjectTemplate from '@/components/inject-template.vue'
import { utils } from '@/components/utils/utils'
import { commonUtils } from '@/components/utils/common-utils'
import { RESIZE_TYPE_MAP } from "@/common/const-canvas"
import { getPxOVwByValue } from '@/store/utils'
import { EventBus } from '@/store/index'
export default {
  name: 'WbTurnBook',
  mixins: [utils, commonUtils],
  setup () {
    return {
      flipIndex: 0,
    }
  },
  created(){
    if(!this.isH5Edit){
      let urls = [this.env.baseUrl + "js/turn/jquery.min.1.7.js", this.env.baseUrl + "js/turn/turn.min.js"];
      let attrs = ["$", "$.turn"];
      let cb = this.initTurn;
      this.dynamicsLoadScripts(urls, attrs, cb, false);
      if(this.commonAttr.isManual){
        EventBus.$off("turnBook")
        EventBus.$on("turnBook", this.onTurnBook)
      }
    }
  },
  components: {
    InjectTemplate,
  },
  methods: {
    getPageStyle(item){
      let backgroundSize = 'contain';
      if(this.commonAttr.isFullScreen){
        let type = this.commonAttr.resizeType;
        if(type == RESIZE_TYPE_MAP.max){
          backgroundSize = "cover";
        }else if(type == RESIZE_TYPE_MAP.min){
          backgroundSize = "contain";
        }else{
          backgroundSize = "100% 100%";
        }
      }
      return {
        'background-image': 'url( ' + item.url + ')',
        'background-repeat': 'no-repeat',
        'background-size': backgroundSize,
        }
    },
    initTurn($) {
      let wid = getPxOVwByValue(this.item.conAttr.width * 2);
      let hei = this.item.conStyles.height;
      $('.flipbook').turn({
          width: wid,
          height: hei,
          elevation: 50,
          gradients: true,
          acceleration: true,
          // autoCenter: true,
          // display: 'single',
      });
      if(!this.commonAttr.isManual){
        window.setTimeout(() => {
          this.turnBookCb = window.setInterval(() => {
            if(this.flipIndex >= this.lists.length){
              window.clearInterval(this.turnBookCb);
              if(this.commonAttr.pageId > 0){
                this.showPage(this.commonAttr.pageId)
              }
              if(this.commonAttr.popId > 0){
                this.showPage(this.commonAttr.popId)
              }
            }
            $(".flipbook1").turn("next");
            this.flipIndex++;
            this.flipIndex++;
          }, 1000)
        }, 500)
      }
    },
    onTurnBook(){
      if(this.commonAttr.isManual && $(".flipbook")){
        $(".flipbook").turn("next");
      }
    },
  },
  beforeUnmount(){
    if(this.commonAttr.isManual){
      EventBus.$off("turnBook")
    }
  }
};
</script>

<style>
.wb-turn-book{
  width: inherit;
  height: inherit;
}
.flipbook {
  overflow: hidden;
  left: -100%;
}
</style>
